<div class="row justify-content-center">
    <div class="col-8">
        <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
            <h2 id="myUserLabel">
                创建或编辑用户
            </h2>

            <div *ngIf="user">
                <jhi-alert-error></jhi-alert-error>

                <div class="form-group" [hidden]="!user.id">
                    <label>ID</label>
                    <input type="text" class="form-control" name="id" formControlName="id" readonly>
                </div>

                <div class="form-group">
                    <label class="form-control-label">登录名</label>
                    <input type="text" class="form-control" name="login"
                           formControlName="login">

                    <div *ngIf="editForm.get('login')!.invalid && (editForm.get('login')!.dirty || editForm.get('login')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="editForm.get('login')?.errors?.required">
                            此字段为必填项。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="editForm.get('login')?.errors?.maxlength">
                            此字段不能超过50个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="editForm.get('login')?.errors?.pattern">
                            此字段只能包含字母、数字和电子邮件地址。
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label">名字</label>
                    <input type="text" class="form-control" name="firstName"
                           formControlName="firstName">

                    <div *ngIf="editForm.get('firstName')!.invalid && (editForm.get('firstName')!.dirty || editForm.get('firstName')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="editForm.get('firstName')?.errors?.maxlength">
                            此字段不能超过50个字符。
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label>姓氏</label>
                    <input type="text" class="form-control" name="lastName"
                           formControlName="lastName">

                    <div *ngIf="editForm.get('lastName')!.invalid && (editForm.get('lastName')!.dirty || editForm.get('lastName')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="editForm.get('lastName')?.errors?.maxlength">
                            此字段不能超过50个字符。
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label">电子邮箱</label>
                    <input type="email" class="form-control" name="email" formControlName="email">

                    <div *ngIf="editForm.get('email')!.invalid && (editForm.get('email')!.dirty || editForm.get('email')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="editForm.get('email')?.errors?.required">
                            此字段为必填项。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="editForm.get('email')?.errors?.maxlength">
                            此字段不能超过100个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="editForm.get('email')?.errors?.minlength">
                            此字段至少需要5个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="editForm.get('email')?.errors?.email">
                            您的电子邮箱格式无效。
                        </small>
                    </div>
                </div>

                <div class="form-check">
                    <label class="form-check-label" for="activated">
                        <input class="form-check-input" [attr.disabled]="user.id === undefined ? 'disabled' : null"
                               type="checkbox" id="activated" name="activated" formControlName="activated">
                        <span>已激活</span>
                    </label>
                </div>

                <div class="form-group">
                    <label>角色</label>
                    <select class="form-control" multiple name="authority" formControlName="authorities">
                        <option *ngFor="let authority of authorities" [value]="authority">{{ authority }}</option>
                    </select>
                </div>
            </div>

            <div *ngIf="user">
                <button type="button" class="btn btn-secondary" (click)="previousState()">
                    <fa-icon icon="ban"></fa-icon>&nbsp;<span>取消</span>
                </button>

                <button type="submit" [disabled]="editForm.invalid || isSaving" class="btn btn-primary">
                    <fa-icon icon="save"></fa-icon>&nbsp;<span>保存</span>
                </button>
            </div>
        </form>
    </div>
</div>
